<template>
  <el-form ref="formRef" :model="modelForm" :rules="rules" class="app-search-container" @submit.native.prevent>
    <div class="app-page-search relative mb-7">
      <el-form-item class="search-title">
        <span class="svg-container">
          <i class="el-icon-user-solid" />
        </span>
        <el-radio-group v-if="isShowBack" v-model="modelForm.backendId" @change="onChangeVersion">
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button v-for="back in props.backendList" :key="back.id" :label="back.id">{{ back.backendName }}</el-radio-button>
        </el-radio-group>
        <el-space class="mr--20px none" :size="20">
          <el-input v-model="modelForm.title" class="w-80" clearable placeholder="请输入关键字搜索" type="text" @keyup.enter.native="onInputSearch" />
          <el-button @click="onSearch">
            <el-space>
              <Icon name="ep:search" />
              <span>搜索</span>
            </el-space>
          </el-button>
        </el-space>
      </el-form-item>
      <div class="publish-version">
        <el-radio-group v-if="isShowVersion" v-model="modelForm.version" class="app-version-radio" @change="onChangeVersion">
          <el-radio-button :label="3">Vue3</el-radio-button>
          <el-radio-button :label="2">Vue2</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="isShowTag" class="article-tags flex justify-between mt-3">
        <el-radio-group v-model="modelForm.tagId" @change="onChangeTags">
          <el-radio-button :label="0">全部</el-radio-button>
          <el-radio-button v-for="tag in props.tagList" :key="tag.id" :label="tag.id">{{ tag.tagName }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
  </el-form>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { debounce } from 'lodash-es'

interface EditProps {
  isShowTag?: boolean
  isShowBack?: boolean
  isShowVersion?: boolean
  backendList?: any
  tagList?: any
}

const props = withDefaults<EditProps, any>(defineProps<EditProps>(), {
  isShowTag: true,
  isShowVersion: true,
  isShowBack: true,
  backendList: [],
  tagList: [],
})

const modelForm = reactive({
  version: 3,
  title: '',
  tagId: 0,
  backendId: 0,
})
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  title: [{ required: true, message: '请输入关键字搜索', trigger: 'blur' }],
  tags: [{ required: true, trigger: 'blur' }],
})

const emit = defineEmits(['handleSearch'])
// 500ms内多次点击只响应最后一次
const onSearch = debounce(() => {
  onEmit()
}, 500)

// 搜索
const onInputSearch = () => {
  onEmit()
}

const onChangeVersion = () => {
  onEmit()
}
const onChangeTags = () => {
  onEmit()
}

const onEmit = () => {
  emit('handleSearch', modelForm)
}
</script>
<style lang="scss" scoped></style>
